<template>
  <div class="container">
    <el-row :gutter="20" v-if="baseData.video.data.error_code == 0">
      <el-col :span="18" class="ci-radius white-bg p-2" style="height: 300px">
        <el-row><b>达人信息</b></el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="4" :xs="4">
            <el-image class="circle-image" :src="userData.avatar"></el-image>
          </el-col>
          <el-col :span="20" :xs="20">
            <el-link :underline="false" class="big-font"
              ><b class="black-font blue-hover">{{
                userData.nickname
              }}</b></el-link
            >
            <p class="small-font grey-font">抖音号：未知</p>
            <p class="small-font grey-font">简介：未知</p>
          </el-col>
        </el-row>
        <el-row class="center-font">
          <el-col :span="6" :xs="6">
            <el-link icon="el-icon-user-solid" :underline="false"
              >粉丝数</el-link
            >
            <p class="mt-5">
              <b>{{ baseData.fans.data.result_list[6].total_fans }}</b>
            </p>
          </el-col>
          <el-col :span="6">
            <el-link icon="el-icon-star-on" :underline="false"
              >今日获赞</el-link
            >
            <p class="mt-5">
              <b>{{ baseData.like.data.result_list[6].new_like }}</b>
            </p>
          </el-col>
          <el-col :span="6">
            <el-link icon="el-icon-circle-plus" :underline="false"
              >评论</el-link
            >
            <p class="mt-5">
              <b>{{ baseData.comment.data.result_list[6].new_comment }}</b>
            </p>
          </el-col>
          <el-col :span="6">
            <el-link icon="el-icon-video-camera-solid" :underline="false"
              >每日内容总数</el-link
            >
            <p class="mt-5">
              <b>{{ baseData.video.data.result_list[6].total_issue }}</b>
            </p>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" class="ci-radius white-bg p-2" style="height: 300px">
        <el-row>
          <el-col :span="16"><b>所属机构</b></el-col>
          <el-col :span="8"
            ><span class="grey-font small-font"
              >机构详情<i class="el-icon-arrow-right"></i></span
          ></el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="6" :xs="4">
            <el-image class="circle-image" :src="userData.avatar"></el-image>
          </el-col>
          <el-col :span="18" :xs="20" class="grey-font small-font">
            <el-link :underline="false" class="big-font"
              ><b class="black-font blue-hover">{{
                userData.nickname
              }}</b></el-link
            >
            <p>领域：</p>
            <p>机构：未设置</p>
          </el-col>
        </el-row>
        <el-row class="center-font">
          <el-col :span="12" :xs="6">
            <el-link icon="el-icon-check" :underline="false">上榜次数</el-link>
            <p class="mt-5"><b>--</b></p>
          </el-col>
          <el-col :span="12">
            <el-link icon="el-icon-s-platform" :underline="false"
              >人气值</el-link
            >
            <p class="mt-5"><b>--</b></p>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="p-2 white-bg mt-5 ci-radius">
      <el-row>
        <b class="big-font">视频列表</b>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="6" v-for="(item, index) in videoData.list" :key="index">
          <el-card :body-style="{ padding: '0px', height: '500px' }">
            <img :src="item.cover" style="width: 100%" />
            <div style="padding: 14px">
              <span>{{ item.title }}</span>
              <div class="bottom clearfix">
                <el-button
                  type="text"
                  class="button"
                  @click="detail(item.share_url)"
                  >查看详情</el-button
                >
                <el-tag type="danger" v-if="item.is_top">置顶</el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-row>
    <el-row>
      <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left" @click="pre"
          >上一页</el-button
        >
        <el-button type="primary" @click="next"
          >下一页<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
      </el-button-group>
    </el-row>
  </div>
</template>

<script>
import { setToken, getToken, removeToken } from "@/utils/cookie";
export default {
  data() {
    return {
      baseData: {},
      userData: {},
      videoData: { cursor: 0 },
      pages: [],
      isNext: true,
    };
  },
  methods: {
    next() {
      if (this.videoData.has_more) {
        this.isNext = true;
        this.getVideoList();
      } else {
        this.$message("没有更多了");
      }
    },
    pre() {
      if (this.pages.length > 0) {
        if (this.isNext) {
          this.pages.pop();
          this.isNext = false;
        }
        if (this.videoData.cursor == 0) {
          this.pages.push(0);
          this.$message("已经是首页了");
        }
        this.videoData.cursor = this.pages[this.pages.length - 1];
        this.getVideoListC();
        this.pages.pop();
      } else {
        this.pages.push(0);
        this.$message("已经是首页了");
      }
    },
    detail(url) {
      window.location.href = url;
    },
    getUserInfo() {
      let id = this.$route.params.id;
      console.log(id);
      this.$http.defaults.headers.common["Authorization"] =
        "Bearer " + getToken();
      this.$http.get(`/douyin/user/info?id=${id}`).then((response) => {
        let data = response.data;
        this.userData = data.data;
        this.getBaseData();
      });
    },
    getBaseData() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$http.defaults.headers.common["Authorization"] =
        "Bearer " + getToken();
      this.$http
        .post("/douyin/open/data/user/all/data", {
          openId: this.userData.openId,
          dataType: 7,
        })
        .then((response) => {
          let data = response.data;
          if (data.data.video == null) {
            this.$message({ type: "warning", message: "该达人抖音授权过期" });
            loading.close();
            return false;
          }
          if (data.data.video.data.error_code !== 0) {
            this.$message({ type: "warning", message: data.data.video.data.description });
            this.getVideoList();
            loading.close();
            return false;
          }
          this.baseData = data.data;
          loading.close();
          this.getVideoList();
        });
    },
    getVideoList() {
      this.$http.defaults.headers.common["Authorization"] =
        "Bearer " + getToken();
      this.$http
        .post("/video/list", [
          { openId: this.userData.openId, cursor: this.videoData.cursor },
        ])
        .then((response) => {
          this.pages.push(this.videoData.cursor);
          let data = response.data;
          this.videoData = data.data.data;
        });
    },
    getVideoListC() {
      this.$http.defaults.headers.common["Authorization"] =
        "Bearer " + getToken();
      this.$http
        .post("/video/list", [
          { openId: this.userData.openId, cursor: this.videoData.cursor },
        ])
        .then((response) => {
          let data = response.data;
          this.videoData = data.data.data;
        });
    },
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style>
body {
  background-color: #f5f7fa;
}
.circle-image {
  width: 70%;
  height: 70%;
  border-radius: 50%;
}
.container {
  width: 76%;
  margin-left: 12%;
  margin-top: 3%;
}
.big-font {
  font-size: 20px;
}
.small-font {
  font-size: 10px;
}
.white-font {
  color: white;
}
.black-font {
  color: black;
}
.grey-font {
  color: grey;
}
.blue-hover:hover {
  color: rgba(49, 49, 253, 0.904);
}
.white-bg {
  background: white;
}
.center-font {
  text-align: center;
}
.mt-5 {
  margin-top: 5px;
}
.mt-2 {
  margin-top: 2px;
}
.ci-radius {
  border-radius: 5px;
}
.p-2 {
  padding: 2%;
}
.m-2 {
  margin: 2%;
}
.ml-2 {
  margin-left: 2px;
}
</style>